<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-row class="bottomLine">
        <el-form-item label="应用:" label-width="40">
          <el-select v-model="queryParams.applicationCode" multiple placeholder="请选择应用">
            <el-option
              v-for="dict in applicationList"
              :key="dict.appCode"
              :label="dict.name"
              :value="dict.appCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <h3>选择事件</h3>
      <el-form-item label="目标转化事件" prop="status" class="bottomLine">
        <el-tooltip content="一般为产品的支付、成单等收益相关的事件" effect="dark" placement="bottom">
          <i class="el-icon-info"></i>
        </el-tooltip>
        <el-select v-model="queryParams.transEvent" placeholder="请选营收事件" size="small" value-key="id">
          <el-option
            v-for="dict in eventTypeOptions"
            :key="dict.id"
            :label="dict.eventTypeName"
            :value="dict"
          />
        </el-select>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="setBeforeItemAttrFun">
          <i class="el-icon-plus"></i> <span class="innerContent">设置前项关联属性</span>
        </el-link>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule(queryParams.transRule)">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选条件</span>
        </el-link>
        <el-row v-show="queryParams.transRule.length>0"  >
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
						<AndOrLine style="height: calc(100% - 20px);transform: translateY(10px);" v-show="queryParams.transRule.length>1" v-model="queryParams.targeteventConditionRelation"></AndOrLine>
            <p style="margin: 10 0 10px;" v-for="(eventItem,index) in queryParams.transRule">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.id"
                  :label="dict.eventTypeName"
                  :value="dict.id"
                />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option
                  v-for="dict in allEventItemListOpts[eventItem.eventType]"
                  :key="dict.id"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.id"
                  :label="dict.eventItemExpression"
                  :value="dict.eventItemCode"
                />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                        v-show="eventItem.eventItemExpression!='between'"></el-input>
              <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.transRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
      </el-form-item>
      <el-form-item label="待归因事件" prop="status" class="bottomLine">
        <el-tooltip content="一般为广告的点击、运营位的点击等运营相关的事件" effect="dark" placement="bottom">
          <i class="el-icon-info"></i>
        </el-tooltip>
        <el-select v-model="queryParams.ascribeEvent" placeholder="请选营收事件" multiple size="small" value-key="id">
          <el-option
            v-for="dict in eventTypeOptions"
            :key="dict.id"
            :label="dict.eventTypeName"
            :value="dict"
          />
        </el-select>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="setRelaAttrFun">
          <i class="el-icon-plus"></i> <span class="innerContent">关联属性</span>
        </el-link>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule(queryParams.ascribeRule)">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选条件</span>
        </el-link>
        <el-row v-show="queryParams.ascribeRule.length>0" >
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
						<AndOrLine style="height: calc(100% - 20px);transform: translateY(10px);" v-show="queryParams.ascribeRule.length>1" v-model="queryParams.attributionConditionRelation"></AndOrLine>
            <p v-for="(eventItem,index) in queryParams.ascribeRule">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.id"
                  :label="dict.eventTypeName"
                  :value="dict.id"
                />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option
                  v-for="dict in allEventItemListOpts[eventItem.eventType]"
                  :key="dict.id"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.id"
                  :label="dict.eventItemExpression"
                  :value="dict.eventItemCode"
                />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                        v-show="eventItem.eventItemExpression!='between'"></el-input>
              <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.ascribeRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
      </el-form-item>
      <el-form-item label="按" prop="status" class="bottomLine">
        <el-tag
          :key="tag.eventType"
          v-for="tag in queryParams.groupTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{ tag.eventItemName }}
        </el-tag>
        <el-select style="width:120px"
                   v-if="inputVisible"
                   v-model="inputValue"
                   ref="saveTagInput"
                   size="small"
                   value-key="id"
                   @keyup.enter.native="handleInputConfirm"
                   @change="handleInputConfirm">
          <el-option
            v-for="dict in allEventItems"
            :key="dict.id"
            :label="dict.eventItemName"
            :value="dict"
          />
        </el-select>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
        <el-link type="primary" :underline="false" style="padding-left:20px;">
          <i class="el-icon-setting"></i> <span class="innerContent">查看</span>
        </el-link>
      </el-form-item>
      <el-form-item label="" prop="status" class="bottomLine" style="padding-left:30px;">
      <el-checkbox v-model="queryParams.checkFlag">直接转化参与归因计算
        <el-tooltip content="若一个“目标转化事件”在转化前，没有发生任何相关的“待归因事件”，则认为该“目标转化事件”属于直接转化。" effect="dark" placement="bottom">
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-checkbox>

      </el-form-item>
      <el-form-item label="" prop="status" class="bottomLine">
        <el-link type="primary" :underline="false" @click="addRule(queryParams.globalRule)">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选条件</span>
        </el-link>
        <el-row v-show="queryParams.globalRule.length>0"  class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
						<AndOrLine style="height: calc(100% - 20px);transform: translateY(10px);" v-show="queryParams.globalRule.length>1" v-model="queryParams.globalConditionRelation"></AndOrLine>
            <p v-for="(eventItem,index) in queryParams.globalRule">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.id"
                  :label="dict.eventTypeName"
                  :value="dict.id"
                />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option
                  v-for="dict in allEventItemListOpts[eventItem.eventType]"
                  :key="dict.id"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.id"
                  :label="dict.eventItemExpression"
                  :value="dict.eventItemCode"
                />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                        v-show="eventItem.eventItemExpression!='between'"></el-input>
              <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.globalRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
      </el-form-item>
      <el-row  class="bottomLine">
        <el-form-item label="分析模型" prop="status">
          <el-select  v-model="queryParams.ascibeType" placeholder="请选分析模型" clearable size="small">
            <el-option
              v-for="dict in ascibeTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归因窗口期" prop="status">
          <el-select v-model="queryParams.windowType" placeholder="请选归因窗口期" clearable size="small">
            <el-option label="自定义" value="diy"></el-option>
            <el-option label="当天" value="current"></el-option>
          </el-select>
          <el-input  v-model="queryParams.timeValue" type="number" size="small" style="width:100px;" v-show="queryParams.windowType==='diy'"> </el-input>
          <el-select v-model="queryParams.timeUnit" size="small" style="width:70px;" v-show="queryParams.windowType==='diy'">
            <el-option label="秒" value="sec"></el-option>
            <el-option label="分钟" value="min"></el-option>
            <el-option label="小时" value="hour"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status" style="float:right;">
          <el-button type="success" icon="el-icon-search" @click="queryAscribeDtaFun">查询</el-button>
        </el-form-item>
      </el-row>

    </el-form>
    <el-container>

      <el-main>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-date-picker
              v-model="params.dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>

          <el-col :span="1.5" style="float: right">
            <el-button type="primary" icon="el-icon-download">导出</el-button>

          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="待归因事件"
            >
            <el-table-column
              prop="value1"
              label="触点"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column label="点击规模">
            <el-table-column
              prop="value2"
              sortable
              label="总点击数"
              >
            </el-table-column>
            <el-table-column
              prop="value3"
              sortable
              label="有效点击用户数"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column label="目标转化">
            <el-table-column
              prop="value4"
              sortable
              label="有效转化点击率"
            >
            </el-table-column>
            <el-table-column
              prop="value5"
              sortable
              label="$启动APP总次数"
              >
            </el-table-column>
            <el-table-column
              prop="value6"
              sortable
              label="贡献度"
              >
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.value6"></el-progress>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <pagination
          :total="tableData.length"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="tableData"
        />
      </el-main>
    </el-container>
    <el-dialog title="设置前向关联事件" :visible.sync="relaEventOpen" width="850px" v-if="relaEventOpen" :close-on-click-modal="false" append-to-body>
      <el-tooltip content="在归因分析中作为归因的辅助曝光点参与计算，提升归因模型的计算精度" effect="dark" placement="bottom">
        <i class="el-icon-info"></i>
      </el-tooltip>
      在归因分析中作为归因的辅助曝光点参与计算，提升归因模型的计算精度
      <div class="relaEventclass" v-for="(relaEvent,index) in queryParams.beforeRelaEvent">
        <span class="fu-filter-pos"> {{ relaEvent.sequence=sequences[index] }} </span>前项关联事件
        <el-select v-model="relaEvent.eventType" style="width:120px">
          <el-option
            v-for="dict in eventTypeOptions"
            :key="dict.id"
            :label="dict.eventTypeName"
            :value="dict.id"
          />
        </el-select>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule(relaEvent.eventItems)">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选条件</span>
        </el-link>
        <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px" @click="removeRule(queryParams.beforeRelaEvent,index)">
          <i class="el-icon-remove"></i>
        </el-link>
        <el-switch
          style="float: right"
          v-model="relaEvent.relaAttrFlag"
          active-text="关联属性"
          inactive-text="">
        </el-switch>
        <p v-show="relaEvent.relaAttrFlag">
          <i class="el-icon-share"></i>关联属性
          <el-select v-model="relaEvent.relaEvent" style="width:120px" value-key="id">
            <el-option
              v-for="dict in eventTypeOptions"
              :key="dict.id"
              :label="dict.eventTypeName"
              :value="dict"
            />
          </el-select>
          <el-select v-model="relaEvent.relaEventAttr" style="width:120px" value-key="id">
            <el-option
              v-for="dict in allEventItemListOpts[relaEvent.relaEvent.id]"
              :key="dict.id"
              :label="dict.eventItemName"
              :value="dict"
            />
          </el-select>
          关联
          <el-select v-model="relaEvent.targetEvent" style="width:120px" value-key="id">
            <el-option
              v-for="dict in eventTypeOptions"
              :key="dict.id"
              :label="dict.eventTypeName"
              :value="dict"
            />
          </el-select>
          <el-select v-model="relaEvent.targetEventAttr" style="width:120px" value-key="id">
            <el-option
              v-for="dict in allEventItemListOpts[relaEvent.relaEvent.id]"
              :key="dict.id"
              :label="dict.eventItemName"
              :value="dict"
            />
          </el-select>
        </p>
        <p v-for="(eventItem,index) in relaEvent.eventItems">
          <el-select v-model="eventItem.eventType" style="width:120px">
            <el-option
              v-for="dict in eventTypeOptions"
              :key="dict.id"
              :label="dict.eventTypeName"
              :value="dict.id"
            />
          </el-select>
          <el-select v-model="eventItem.eventItem" style="width:120px" value-key="id">
            <el-option
              v-for="dict in allEventItemListOpts[eventItem.eventType]"
              :key="dict.id"
              :label="dict.eventItemName"
              :value="dict"
            />
          </el-select>
          <el-select v-model="eventItem.eventItemExpression" style="width:120px">
            <el-option
              v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
              :key="dict.id"
              :label="dict.eventItemExpression"
              :value="dict.eventItemCode"
            />
          </el-select>
          <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                    v-show="eventItem.eventItemExpression!='between'"></el-input>
          <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
          <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                   @click="removeRule(relaEvent.eventItems,index)">
            <i class="el-icon-remove"></i>
          </el-link>
        </p>
      </div>
      <div>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRelaEvent">
          <i class="el-icon-puls"></i> <span class="innerContent">添加前向关联事件</span>
        </el-link>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="relaubmitForm">确 定</el-button>
        <el-button @click="relaAttrCancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设置关联事件" :visible.sync="relaAttrOpen" width="850px" v-if="relaAttrOpen" :close-on-click-modal="false" append-to-body>
      <el-tooltip content="设置前项关联事件后，待归因事件只能与前项关联事件的属性进行关联，未设置则与目标转化事件进行关联" effect="dark" placement="bottom">
        <i class="el-icon-info"></i>
      </el-tooltip>
      设置前项关联事件后，待归因事件只能与前项关联事件的属性进行关联，未设置则与目标转化事件进行关联
      <p v-for="(relaEvent,index) in queryParams.relaAttribute">
        <i class="el-icon-share"></i>关联属性
        <el-select v-model="relaEvent.relaEvent" style="width:120px" value-key="id">
          <el-option
            v-for="dict in eventTypeOptions"
            :key="dict.id"
            :label="dict.eventTypeName"
            :value="dict"
          />
        </el-select>
        <el-select v-model="relaEvent.relaEventAttr" style="width:120px" value-key="id">
          <el-option
            v-for="dict in allEventItemListOpts[relaEvent.relaEvent.id]"
            :key="dict.id"
            :label="dict.eventItemName"
            :value="dict"
          />
        </el-select>
        关联
        <el-select v-model="relaEvent.targetEvent" style="width:120px" value-key="id">
          <el-option
            v-for="dict in eventTypeOptions"
            :key="dict.id"
            :label="dict.eventTypeName"
            :value="dict"
          />
        </el-select>
        <el-select v-model="relaEvent.targetEventAttr" style="width:120px" value-key="id">
          <el-option
            v-for="dict in allEventItemListOpts[relaEvent.relaEvent.id]"
            :key="dict.id"
            :label="dict.eventItemName"
            :value="dict"
          />
        </el-select>
      </p>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="relaAttrsubmitForm">确 定</el-button>
        <el-button @click="relaCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getActionPathDataFun, getAllSiteFlowList, getAscribeDataFun} from "@/api/analytics/basemeasure";
import OtherLineChart from "@/views/analytics/basemonitor/comments/OtherLineChart";
import AndOrLine from '@/components/AndOrLine/index.vue'
import {allEventItemsOptions, eventItemsOptions, eventTypeOptions, listItem} from "@/api/config/item";
import {listAllPropertyResult, listPropertyByType} from "@/api/config/property";
import {listApplication} from "@/api/config/application";
import {getAllEventMethodResult} from "@/api/config/emethod";
import Template from "@/views/config/template/index";

export default {
  name: "ascribe",
  components: {
    Template,
    OtherLineChart,
		AndOrLine,
  },
  data() {
    return {
      showNum:7,
      switchValue: false,
      startFlag:'start',
      applicationList: [],
      statusOptions: [],
      params: {
        dateRange: ''
      },
      lineChartData: {
        actualData: []
      },
      // 遮罩层
      loading: true,
      tableData: [{
        id: 3,
        value1: '$APP激活的启动时长',
        value2: '368',
        value3: '368',
        value4: '128',
        value5: '3218',
        value6: '60'
      }],

      // 查询参数
      queryParams: {
        applicationCode: [],
        transEvent:{},
        transRule:[],
        ascribeEvent:[],
        ascribeRule:[],
        groupTags:[],
        globalRule:[],
        ascibeType: '1',
        windowType: 'diy',
        timeValue: undefined,
        timeUnit: 'sec',
        checkFlag:false,
        beforeRelaEvent:[],
        relaAttribute:[],
				targeteventConditionRelation: 'and',
				attributionConditionRelation: 'and',
				globalConditionRelation: 'and'
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      drawer: false,
      direction: 'rtl',
      formLabelWidth: '90px',
      index: 1,
      allEventItems:[],
      eventTypeOptions: [],
      eventItemsOptions: [],
      referrerTypeOptions: [],
      ascibeTypeOptions: [],
      allEventItemListOpts:{},
      eventPropertysOptions:{},
      inputVisible: false,
      inputValue: '',
      relaEventOpen:false,
      relaAttrOpen:false,
      sequences:['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      // 表单参数
      form: {}
    };
  },
  created() {
    this.getApplicationList();
    this.getEventTypeList();
    this.getAllEventItemsList();
    this.getEventItemFun();
    this.getAllFlowList();
    this.getDicts("sys_ascribe_analy_type").then(response => {
      this.ascibeTypeOptions = response.data;
    });

  },
  methods: {
    getAllEventItemsList(){
      allEventItemsOptions().then(response => {
        this.allEventItemListOpts = response.data;
      });
      listAllPropertyResult().then(response => {
        this.eventPropertysOptions = response.data;
      });
      getAllEventMethodResult().then(response => {
        this.allEventItemMethodOpts = response.data;
      });
    },
    getEventTypeList() {
      var param = {status: 'Y'};
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },
    getEventItemFun(){
      listItem({}).then(response => {
        this.allEventItems = response.rows;
      });
    },
    getApplicationList() {
      listApplication({status: 'Y'}).then(response => {
        this.applicationList = response.rows;
        let that = this;
        this.applicationList.forEach(function (app) {
          if (app.defaultFlag === 'Y') {
            that.queryParams.applicationCode.push(app.appCode);
          }
        });
      });
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    getAllFlowList() {
      var param = {};
      getAllSiteFlowList(param).then(response => {
        this.lineChartData.actualData = response.data;
      });
    },

    handleClose(tag) {
      this.queryParams.groupTags.splice(this.queryParams.groupTags.indexOf(tag.eventTypeName), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm(val) {
      if (val) {
        this.queryParams.groupTags.push(val);
      }
      console.log(this.queryParams.groupTags)
      this.inputVisible = false;
      this.inputValue = '';
    },
    addRule(array){
      let eventItem={
        eventType:'',
        eventItem:{},
        eventItemExpression:'',
        valueType:'',
        value1Str:'',
        value2Str:'',
      };
      array.push(eventItem);
    },

    removeRule(array,index){
      array.splice(index,1);
    },
    setBeforeItemAttrFun(){
      this.relaEventOpen=true;
    },
    setRelaAttrFun(){
      let that=this;
      this.queryParams.relaAttribute=[];
      this.queryParams.beforeRelaEvent.forEach(event=>{
        that.queryParams.ascribeEvent.forEach(asc=>{
           let relaAttr={
             relaEvent:that.queryParams.transEvent,
             relaEventAttr:undefined,
             targetEvent:asc,
             targetEventAttr:undefined
           }
          this.queryParams.relaAttribute.push(relaAttr)
        })
      });
      this.relaAttrOpen=true;
    },
    addRelaEvent(){
      let index=this.queryParams.beforeRelaEvent.length;
      let relaEvent={
        sequence:this.sequences[index],
        eventType:{},
        eventItems:[],
        relaAttrFlag:false,
        relaEvent: {},
        relaEventAttr: {},
        targetEvent: {},
        targetEventAttr: {}
      };
      this.queryParams.beforeRelaEvent.push(relaEvent)
    },
    relaAttrCancel(){
      this.relaEventOpen=false;
    },
    relaCancel(){
      this.relaAttrOpen=false;
    },
    relaubmitForm(){
      this.relaEventOpen=false;
    },
    relaAttrsubmitForm(){
      this.relaAttrOpen=false;
      this.queryAscribeDtaFun();
    },
    queryAscribeDtaFun(){
      console.log(this.queryParams);
      this.loading=true;
      let requestJson=JSON.stringify(this.queryParams);
      getAscribeDataFun({requestJson:requestJson}).then(response => {
        console.log(response.data);
        this.tableTitle= response.data.tableTitle;
        this.tableData= response.data.tableData;
        this.loading=false;
      });
    }
  }


};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
}
.innerContent {
  font-size: 14px;
  line-height: 20px;
  color: #307ef2;
  cursor: pointer;
}
.bottomLine{
  width:100%;
  display:inline-block;
  border-bottom: 1px solid #e9f0f7;
  margin-bottom: 10px;
  padding-bottom:10px;
}
.fu-filter-pos {
  background: #C3E6D0;
  color: #2DCA93;
  cursor: move;
  float: left;
  width: 24px;
  height: 24px;
  line-height:24px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 10px;
  transition: background .2s;
}
.relaEventclass{
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.app-container {
  background-color: #f7f9fa;
}
</style>
